<template>
  <view class="record-list" style="">
    <view class="list_top">
      <view class="list_top_title"> 待处理溯源 </view>
      <view class="list_top_msg" @click="$emit('get_record')">
        我的记录
        <text class="iconfont icon-arrow-right" style="font-size: 20rpx"></text>
      </view>
    </view>
    <view class="list_head">
      <block v-for="(item, index) in list" :key="index">
        <view class="list_item" @click="$emit('get_info', item)">
          <view class="list_left">
            <text class="iconfont icon-integral list_left_icon"></text>
            <view class="list_left_info">
              <view class="list_left_info_title">
                {{ item.batch_name }}
              </view>
              <view class="list_left_info_content">
                {{ item.batch_number }} {{ item.process_name }}
              </view>
            </view>
          </view>
          <view class="list_right">
            <view
              class="list_right_title"
              v-if="item.product_batch_also_count == 0"
            >
              待填写
            </view>
            <view class="list_right_title" v-else>
              还有{{ item.product_batch_also_count }}步
            </view>
            <view class="list_right_content">
              当前 {{ item.product_batch_current_count }}步·共{{
                item.product_batch_total_count
              }}步
            </view>
          </view>
        </view>
      </block>
      <view class="list_items" v-if="list.length == 0"> 暂无待处理溯源 ~ </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      defautl: () => {
        return [];
      },
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>


.list_top_msg {
  font-size: 24rpx;
  color: #888888;
}

.list_top_title {
  font-size: 30rpx;
  color: #000000;
  font-weight: 600;
}

.list_top {
  padding: 30rpx 2.5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.list_head {
  width: 95%;
  background: #fff;
  border-radius: 25rpx;
  margin: 0 auto;
  .list_items {
    width: 95%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30rpx 0;
    font-size: 22rpx;
    color: #c1c1c1;
  }
  .list_item {
    width: 95%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 0;
  }

  .list_left_info_content {
    font-size: 24rpx;
    color: #8c8c8c;
    padding-top: 2rpx;
  }

  .list_left_info_title {
    font-size: 30rpx;
    color: #262626;
    font-weight: 600;
  }

  .list_left_info {
    margin-left: 22rpx;
  }

  .list_left_icon {
    /* 	width: 32rpx;
		height: 31rpx; */
    font-size: 32rpx;
  }

  .list_left {
    display: flex;
    align-items: center;
  }

  .list_right_content {
    font-size: 24rpx;
    color: #8c8c8c;
    padding-top: 2rpx;
  }

  .list_right_title {
    font-size: 30rpx;
    color: #f0250e;
    font-weight: 600;
    text-align: end;
  }
}
</style>
